<template>
  <div style="color: #030364;">
    <h2 style="margin-left: 200px">链接批量生成二维码</h2>
    <div class="div88">

      <a href="http://www.xhxlcloud.com:8080/link/template/xlsx"
         target="_blank"
         style="text-decoration: none;font: italic 600 24px 'Microsoft Himalaya';
         line-height: 90px;
         height: 80px;
         width: 200px;
         padding-left: 20px;
         padding-right: 20px;">
        点我下载模板
      </a>

    </div>

    <div style="margin-top: 350px" class="div88">
      <el-form ref="form" enctype="multipart/form-data">
        <el-form-item enctype="multipart/form-data">
          <input type="file" name="file" ref="myFile" style="display: block"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round="true" @click="exportsw" size="medium" style="display: block">提交</el-button>
        </el-form-item>

      </el-form>
    </div>

  </div>
</template>

<script>

export default {
  name: "More",
  data() {
    return {
        id: 0,
        file:new FormData(),
        fileName: ""
    }
  },
  methods: {
    exportsw(){
        let myFile = this.$refs.myFile;
        let files = myFile.files;
        let file = files[0];
        var formData = new FormData();
        formData.append("file", file);
        this.postRequest('/more/upload', formData).then(resp => {
          if(resp)
            this.$message.success("批量链接导入成功");
        })
    },
  }

}
</script>

<style scoped>
a::before{
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  border-radius: 50px;
  filter:blur(10px);
  z-index: -1;
}

a {
  display: block;
  line-height: 200px;
  text-align: center;
  position: absolute;
  font-weight: 700;
  font-size:35px;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  height: 80px;
  width: 270px;
  border-radius: 50px;
  z-index: 1;
}

@keyframes sun {
  100%{
    background-position: -400% 0;
  }
}

a:hover::before{
  animation: sun 8s infinite;
}
a:hover {
  animation: sun 8s infinite;
}
.div88{
  text-align: center;
  display:block;
  margin-left: 200px;
  margin-top: 50px;
}
</style>
